﻿var routeStart = "routeStart";
var routeEnd = "routeEnd";
var topoView = $('#topoView'),
                pstyle = {
                    Endpoint: ["Dot", { radius: 2 }],
                    paintStyle: {
                        strokeStyle: "#e28b1a",
                        fillStyle: "#e28b1a"
                    },
                    connector: ["Flowchart", { stub: [0, 0], gap: 2, cornerRadius: 5, alwaysRespectStubs: true }],
                    connectorStyle: {
                        lineWidth: 3,
                        strokeStyle: "#e28b1a",
                    },
                    maxConnections: -1
                };
function viewPop(response) {
    var list = eval(response.split('&')[0]),
        blocks = eval(response.split('&')[1]),
        htmlText = "",
        conn = "";
    //------------插入元素-------------
    for (var i in blocks) {
        var viewstyle = 'left:' + blocks[i].itemX + 'px;top:' + blocks[i].itemY + 'px;',
            newid = blocks[i].newid,
            itemseq = blocks[i].itemseq,
            itemid = blocks[i].itemid,
            itemname = blocks[i].itemname;
        if (newid == routeStart || newid == routeEnd) {
            htmlText = htmlText + '<div class="elebox" id="' + newid + '" data-itemseq="' + itemseq + '" data-itemid="' + itemid + '" data-itemname="' + itemname + '" style="' + viewstyle + 'background-color:black;width:25px;height:25px;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;"><span class="dragPoint">' + itemname + '</span></div>';
            isHasStart = false;
        }
        else {
            htmlText = htmlText + '<div class="elebox" id="' + newid + '" data-itemseq="' + itemseq + '" data-itemid="' + itemid + '" data-itemname="' + itemname + '" style="' + viewstyle + '"><span class="dragPoint">' + itemid + '</span><span class="dragPoint">' + itemname + '</span></div>';
        }
    };
    topoView.html(htmlText);

    //------------默认连接-------------
    var instanceView = jsPlumb.getInstance({
        Endpoint: ["Dot", { radius: 2 }],
        ConnectionOverlays: [
            ["Arrow", { location: 1, id: "arrow", length: 10, foldback: 0.8, width: 10 }],
            ["Label", { label: "关系", id: "label", cssClass: "labelstyle" }]
        ],
        Container: "topoView"
    });
    var windows = jsPlumb.getSelector("#topoView .elebox");
    instanceView.doWhileSuspended(function () {
        var isFilterSupported = instanceView.isDragFilterSupported();
        if (isFilterSupported) {
            instanceView.makeSource(windows, { filter: 'none', anchor: "Continuous" }, pstyle);
        } else {
            var eps = jsPlumb.getSelector(".elebox");
            for (var i = 0; i < eps.length; i++) {
                var e = eps[i], p = e.parentNode;
                instanceView.makeSource(e, { parent: p, anchor: "Continuous" }, pstyle);
            }
        }
    });
    instanceView.makeTarget(windows, { anchor: "Continuous" }, pstyle);

    //------------更改样式-------------
    for (var i in list) {
        var conor = instanceView.connect({ source: list[i].sourceId, target: list[i].targetId });
        conor.getOverlay("label").setLabel(list[i].label);
        conor.setPaintStyle({ fillStyle: list[i].color, strokeStyle: list[i].color });
    };
}